<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/4/19
  Time: 10:13 上午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="container-fluid">
    <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">💻商城</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <c:if test="${user!=null}">
                            <li><a href="#">${user.username}</a></li>
                        </c:if>
                        <li class="active"><a href="/mac/product/index"><span class="glyphicon glyphicon-home"></span>&nbsp;首页</a></li>
                        <li><a id="login_a" href="#" data-toggle="modal" data-target="#myModal"><span class="glyphicon  glyphicon-user"></span>&nbsp;登录</a></li>
                        <li><a href="/mac/login/carts/index"><span class="glyphicon glyphicon-shopping-cart"></span>&nbsp;我的购物车</a></li>

                        <li><a href="/mac/map/ditu.jsp"><span class="glyphicon  glyphicon-globe"></span>&nbsp;地图</a></li>
                        <li><a href="/mac/login/orders/index"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;我的订单</a></li>
                        <li><a href="/mac/login/collect/index"><span class="glyphicon glyphicon-star-empty"></span>&nbsp;我的收藏</a></li>
                        <li><a href="/mac/login/collect/index"><span class="glyphicon glyphicon-star-empty"></span>&nbsp;个人中心</a></li>
                        <li><a href="/mac/user/exit"><span class="glyphicon glyphicon-off"></span>&nbsp;退出</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">用户登录入口</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" method="post">
                    <div class="form-group has-feedback">
                        <label class="col-md-2 control-label">用户名</label>
                        <div class="col-md-8">
                            <input name="username" type="text" class="form-control" id="username" placeholder="请输入用户名">
                            <span class="glyphicon glyphicon-user form-control-feedback"></span>
                        </div>
                        <label id="uu" style="display: none" class="text-danger">用户不存在</label>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-md-8">
                            <input name="password" type="text" class="form-control" id="password" placeholder="请输入密码">
                            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                        </div>
                        <label id="pp" style="display: none" class="text-danger">密码错误</label>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox">请记住我
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" onclick="login()" class="btn btn-default">登录</button>
                        </div>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<script>
    function login(){
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;

        //通过ajax发送请求到后端 - 局部刷新
        //ajax请求的后台不能有任何跳转的语句 - 后台仅仅会返回json数据.
        //ajax - 纯js写法
        //jquery语法

        //发送到后台的数据使用json对象 {"key":"value","key":"value"}
        let send_data = {"username":username,"password":password}
        $.post('/mac/user/login',send_data,function(data){
            //此处的data代表的是后台返回过来的Json字符串->json对象
            //json对象.key -> value
            let uu = document.getElementById("uu");
            let pp = document.getElementById("pp");
            uu.style.display="none";
            pp.style.display="none";
            console.log(data.code);
            if(data.code=="200"){
                window.location='/mac/product/index';
            }else if(data.code=="404"){
                uu.style.display="";

            }else if(data.code=="500"){
                pp.style.display="";
            }
        })
    }
</script>
